<!--
 * @Author: GKN
 * @Date: 2023-08-21 17:14:24
 * @LastEditTime: 2024-01-22 16:25:24
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\home\cloudHall.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="mpage main mainPadding">
        <div class="max-w">
        <div class="top">
            <div class="topimg">
                <img src="~@/assets/img/cloud/word.png" alt="">
            </div>
            <div class="line"><img style="width: 100%;" src="~@/assets/img/cloud/c.png" alt=""></div>
            <div class="hostView shadow-1 border-r15">
                <div class="count"> 
                    紧紧围绕着创建“政治型、学习型、服务型、实干型、廉洁型”的“五型”模范机关创建要求，深化党务、业务、服务“三务融合”，形成纵向上下联动、横向多维融合的生动局面，凝聚了创建“五型”模范机关的新动能。
                </div>
                <div class="listView">
                    <el-row :gutter="20">
                        <el-col :span="8" v-for="(item,i) in list" :key="i">
                            <div class="imgview border-r6"></div>
                            <div class="title-16-left omit" style="padding:20px 0;">{{item.name}}</div>
                        </el-col>
                    </el-row>
                </div>
            </div>    
        </div>
        </div>
    </div>
    
</template>
  
<script setup>
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
    const loading = ref(false)
    const list = ref([])
    const getList=()=>{
        list.value = [
            {name:'和恢复耦合'},{name:'和恢复耦合'},{name:'和恢复耦合'},{name:'和恢复耦合'},{name:'和恢复耦合'}
        ]
    }
    getList()
</script>
  
<style lang='less' scoped>
.mpage{
    // background: #D10B00;
    background: url('@/assets/img/cloud/back.jpg');
    padding-top: 200px;
    padding-bottom: 100px;
    .top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .topimg{
            width: 766px;
            height: 229px;
            // background: url('@/assets/img/cloud/word.png') center no-repeat;
        }
        .line{
            width: 90%;
            height: 50px;
        }
        .hostView{
            width: 80%;
            margin: 0 auto;
            background: linear-gradient(to bottom, #FFEBD1,#FFFFFF);
            padding: 30px 20px;
            .count{
                width: 100%;
                padding:10px;
                background: #FFE1DB;
                border-radius: 20px 20px 20px 20px;
                font-size: 20px;
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: 500;
                color: #333333;
                line-height: 34px;
                text-align: left;
            }
        }
    }
}
.listView{
    margin-top: 30px;
}
.imgview{
    height: 164px;
    width: 100%;
    background: #ececec;
}
</style>
  
  